<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>Data后台管理系统</title>
<link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/style.css" />
</head>
<!--/meta 作为公共模版分离出去-->

<body>
<article class="cl pd-20">
	<form action="" method="post" class="form form-horizontal" id="form-add">
		<input type="hidden" name="id" id="id" value="">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">
				<span class="c-red">*</span> 角色名称：</label>
			<div class="formControls col-xs-6 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="请输入管理员角色名称" id="name" name="name">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">系统角色：</label>
			<div class="formControls col-xs-8 col-sm-9" id="perlist">

			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">备注：</label>
			<div class="formControls col-xs-4 col-sm-6">
				<textarea name="note" id="note" cols="" rows="" class="textarea"  placeholder="说点什么...100个字符以内" dragonfly="true" onKeyUp="textarealength(this,100)"></textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<input class="btn btn-primary radius" type="button" id="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
			</div>
		</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="../lib/layer/2.4/layer.js"></script> 
<script type="text/javascript" src="../static/h-ui/js/H-ui.js"></script> 
<script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.page.js"></script> 
<!--/_footer /作为公共模版分离出去-->

<script  type="text/javascript" src="../static/js/admin.js"></script>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="../lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="../lib/jquery.validation/1.14.0/messages_zh.js"></script> 
<script type="text/javascript">
	var action = ""
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == "action") {
			action = pair[1];
		}
		if (pair[0] == "id") {
			id = parseInt(pair[1]);
        }
	}
	if (action!="edit") { 
		$.ajax({
			type:"POST",
			url:"/ajax/permission/list",
			data:null,
			dataType:"json",
			beforeSend:function(request){
				request.setRequestHeader("authStr", window.localStorage.getItem("userId")+"-"+window.localStorage.getItem("token"));
			},
			success:function(data){
				// console.log(data);
				if (data.success==true){
					var pList =  data.data;
					// console.log(pList);
					var perlist_str = "";
					pList.forEach(permission => {
						perlist_str += '<dl class="permission-list">';
						perlist_str += '<dt><label><input type="checkbox" value="'+permission.id+'" name="check[]" class="parents" id="user-Character-'+permission.id+'">'+permission.name+'</label></dt>';
						perlist_str += '<dd>';
						permission.children.forEach(per => {
							perlist_str += '<dl class="cl permission-list2">';
							perlist_str += '<dt><label><input type="checkbox" value="'+per.id+'" name="check[]" class="childs" id="user-Character-'+permission.id+'-'+per.id+'">'+per.name+'</label></dt>';
							perlist_str += '<dd>';
							per.children.forEach(p => {
								perlist_str += '<label><input type="checkbox" value="'+p.id+'" name="check[]" class="groundchilds" id="user-Character-'+permission.id+'-'+per.id+'-'+p.id+'">'+p.name+'</label>';
							});
							perlist_str += '</dd>';
							perlist_str += '</dl>';
						});
						perlist_str += '</dd>';
						perlist_str += '</dl>';
					});
					// console.log(perlist_str);
					$("#perlist").append(perlist_str);
				}
			}
		});
	} else {
		$("#id").val(id);
		$.ajax({
			type:"POST",
			url:"/ajax/admin_role/getrole",
			data:{"id": id},
			dataType:"json",
			beforeSend:function(request){
				request.setRequestHeader("authStr", window.localStorage.getItem("userId")+"-"+window.localStorage.getItem("token"));
			},
			success:function(data){
				console.log(data);
				if (data.success==true){
					var role = data.data.role;
					$("#name").val(role.name);
					$("#note").val(role.note);
					var perStr = role.permission;
					var pList =  data.data.pList;
					// console.log(pList);
					var perlist_str = "";
					pList.forEach(permission => {
						perlist_str += '<dl class="permission-list">';
						if (perStr.indexOf(permission.id)>-1) {
							perlist_str += '<dt><label><input type="checkbox" value="'+permission.id+'" name="check[]" checked class="parents" id="user-Character-'+permission.id+'">'+permission.name+'</label></dt>';
						} else {
							perlist_str += '<dt><label><input type="checkbox" value="'+permission.id+'" name="check[]" class="parents" id="user-Character-'+permission.id+'">'+permission.name+'</label></dt>';

						}
						perlist_str += '<dd>';
						permission.children.forEach(per => {
							perlist_str += '<dl class="cl permission-list2">';
								if (perStr.indexOf(per.id)>-1) {
									perlist_str += '<dt><label><input type="checkbox" value="'+per.id+'" name="check[]" checked class="childs" id="user-Character-'+permission.id+'-'+per.id+'">'+per.name+'</label></dt>';
								} else {
									perlist_str += '<dt><label><input type="checkbox" value="'+per.id+'" name="check[]" class="childs" id="user-Character-'+permission.id+'-'+per.id+'">'+per.name+'</label></dt>';
								}
							perlist_str += '<dd>';
							per.children.forEach(p => {
								if (perStr.indexOf(per.id)>-1) {
									perlist_str += '<label><input type="checkbox" value="'+p.id+'" name="check[]" checked class="groundchilds" id="user-Character-'+permission.id+'-'+per.id+'-'+p.id+'">'+p.name+'</label>';
								} else {
									perlist_str += '<label><input type="checkbox" value="'+p.id+'" name="check[]" class="groundchilds" id="user-Character-'+permission.id+'-'+per.id+'-'+p.id+'">'+p.name+'</label>';
								}
							});
							perlist_str += '</dd>';
							perlist_str += '</dl>';
						});
						perlist_str += '</dd>';
						perlist_str += '</dl>';
					});
					// console.log(perlist_str);
					$("#perlist").append(perlist_str);
				}
			}
		});
	}	

	// 点选动作
	// $(".childs").on("click",function(){	// ajax 添加的无法激活 onclick 事件, .live 已在 jquery1.9.1 中被移除
	// 	console.log("test");
	// 	$(this).closest("dl").find("dd input:checkbox").prop("checked",$(this).prop("checked"));
	// 	$(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked",true);
	// });

	$('#perlist').on('click','input',function () {	
		if($(this).hasClass("childs")) {
			$(this).closest("dl").find("dd input:checkbox").prop("checked",$(this).prop("checked"));
			$(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked",true);
		}
		if($(this).hasClass("parents")) {
			$(this).closest("dl").find("dd input:checkbox").prop("checked",$(this).prop("checked"));			
		}
		if ($(this).hasClass("groundchilds")) {
			var l =$(this).parent().parent().find("input:checked").length;
			var l2=$(this).parents(".permission-list").find(".permission-list2 dd").find("input:checked").length;
			if($(this).prop("checked")){
				$(this).closest("dl").find("dt input:checkbox").prop("checked",true);
				$(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked",true);
			}
			else{
				if(l==0){
					$(this).closest("dl").find("dt input:checkbox").prop("checked",false);
				}
				if(l2==0){
					$(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked",false);
				}
			}
		}
	})

	// 提交表单
	$(function(){
		$("#button").on('click', function(){
			if(validform().form()) {
				//通过表单验证，以下编写自己的代码
				var edata = $("#form-add").serialize();
				$.ajax({
					type: 'post',
					url: '/ajax/admin_role/update',
					data: edata,
					dataType: "json",
					beforeSend:function(request){
						request.setRequestHeader("authStr", window.localStorage.getItem("userId")+"-"+window.localStorage.getItem("token"));
					},
					success: function(data) {
						// console.log(data);
						if (data.success==true) {
							if (action=="edit") {
								layer.msg(data.msg, {icon:6,time:2000},function(){
									window.parent.location.reload();
									var index = parent.layer.getFrameIndex(window.name);
									parent.layer.close(index);
								});
							} else {
								layer.confirm('数据添加成功!', {
									btn: ['继续添加','返回列表'] //按钮
								}, function(){
									$("#form-edata-add")[0].reset();
									layer.closeAll('dialog');
								}, function(){
									window.parent.location.reload();
									var index = parent.layer.getFrameIndex(window.name);
									parent.layer.close(index);
								});
							}
						} else {
							layer.msg(data.msg, {icon:5,time:2000});
						}
						return false;
					}
				});
				return false;
			} else {
				//校验不通过，什么都不用做，校验信息已经正常显示在表单上
				layer.msg("请按要求填写表单", {icon:5, time:2000});
				return false;
			}
		});
	});

	//编写表单验证函数validform，在验证按钮注册按钮点击事件内调用验证函数对象
	function validform(){
	/*关键在此增加了一个return，返回的是一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/
		return $("#form-add").validate({
			rules : {
				name: {
					required : true
				},
			},
			messages : {
				name : {
					required : '角色名必填',
				},
			},
			onkeyup:false,
			focusCleanup:true,
			success:"valid"
		});
	}
	//注册表单验证
	$(validform());
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>